<template>
  <div class="index-container">
    <SearchInput @onSearch="onSearch" v-model="word" />
    <GoodsSwiper :imgs="imgs" />
    <IndexNav />
  </div>
</template>
<script>
export default {
  async asyncData({ app }) {
    try {
      const { data } = await app.$apiGetSwiper();
      return { swiperList: data };
    } catch (error) {
      console.log(error);
      return { swiperList: [] };
    }
  },
  data: () => ({ swiperList: [], word: "" }),
  methods: {
    onSearch(word) {
      this.$router.push({
        name: "search",
        query: {
          word
        }
      });
    }
  },
  computed: {
    imgs() {
      return this.swiperList.map(i => ({
        title: i.g_name,
        src: i.g_src,
        link: i.g_id
      }));
    }
  }
};
</script>

<style lang="scss" scoped>
.index-container {
  .myswiper {
    height: 250px;
  }
}
</style>
